{% extends 'layouts/base.html' %}

{% block title %}Course Scheduling{% endblock %}
{% block meta_description %}Course Scheduling Home Page{% endblock %}




{% block body %}

<script type="text/javascript">
  $(document).ready(function() {
    $("#add-major").on("click", function(event) {

      event.preventDefault();
      var newMajor =
        "<div class=\"leftcontact\"> \
          <div class=\"form-group\">  \
            <p>Major <span>*</span></p> \
            <span class=\"icon-case\"><i class=\"fa fa-bar-chart\"></i></span> \
            <select class=\"js-example-basic-multiple input-field\" name=\"major\" required> \
              <option value=\"Computer Science\" selected=\"true\">Computer Science</option> \
              <option value=\"Political Science\">Political Science</option> \
              <option value=\"Business Economics\">Business Economics</option> \
            </select> \
          </div> \
        </div> \
         <div class=\"rightcontact\"> \
           <div class=\"form-group\"> \
             <p>Specialization Name <span>*</span></p> \
             <span class=\"icon-case\"><i class=\"fa fa-book\"></i></span> \
             <select class=\"js-example-basic-multiple input-field\" name=\"specialization\" required> \
               <option value=\"Intelligent Systems\" selected=\"true\">Intelligent Systems</option> \
               <option value=\"Information\">Information</option> \
               <option value=\"Algorithm\">Algorithm</option> \
               <option value=\"Architecture and Embedded Systems\">Architecture and Embedded Systems</option> \
               <option value=\"General Computer Science\">General Computer Science</option> \
               <option value=\"Networked Systems\">Networked Systems</option> \
               <option value=\"Systems and Software\">Systems and Software</option> \
               <option value=\"Visual Computing\">Visual Computing</option> \
             </select> \
           </div> \
         </div>";
      $('#majors').html($('#majors').html() + newMajor);

      if($("#input-form").find("select[name='major']").length == 4) {
        $(this).hide();
      }
    })
  })
</script>

  <h1>Course Scheduling</h1>

   <form id="input-form" action="{{ url_for('schedule.schedule_preview') }}" method="post">
     <div id="majors">
       <div id="sendmessage"> Your message has been sent successfully. Thank you. </div>

       <div class="leftcontact">
         <div class="form-group">
           <p>Current Quarter <span>*</span></p>
           <span class="icon-case"><i class="fa fa-calendar"></i></span>
           <select class="js-example-basic-single input-field" name='quarter' required>
             <option value="0" selected="true">Fall</option>
             <option value="1">Winter</option>
             <option value="2">Spring</option>
             <!-- <option value="3">Summer Session I</option>
             <option value="4">Summer Session II</option>
             <option value="5">Summer Session 10-Week</option> -->
           </select>
         </div>
       </div>

       <div class="rightcontact">
        <div class="form-group">
          <p>Number of Credits Applied <span>*</span></p>
          <span class="icon-case"><i class="fa fa-bar-chart"></i></span>
          <input class="input-field" type="number" step="0.1" min=0 name="credits" required/>
          <div class="validation"></div>
        </div>
      </div>

      <div class="leftcontact">
        <div class="form-group">
          <p>Major <span>*</span></p>
          <span class="icon-case"><i class="fa fa-bar-chart"></i></span>
          <select class="js-example-basic-multiple input-field" name="major" required>
            <option value="Computer Science" selected="true">Computer Science</option>
            <option value="Political Science">Political Science</option>
            <option value="Business Economics">Business Economics</option>
          </select>
        </div>
      </div>

       <div class="rightcontact">
         <div class="form-group">
           <p>Specialization Name <span>*</span></p>
           <span class="icon-case"><i class="fa fa-book"></i></span>
           <select class="js-example-basic-multiple input-field" name="specialization" required>
             <option value="Intelligent Systems" selected="true">Intelligent Systems</option>
             <option value="Information">Information</option>
             <option value="Algorithm">Algorithm</option>
             <option value="Architecture and Embedded Systems">Architecture and Embedded Systems</option>
             <option value="General Computer Science">General Computer Science</option>
             <option value="Networked Systems">Networked Systems</option>
             <option value="Systems and Software">Systems and Software</option>
             <option value="Visual Computing">Visual Computing</option>
           </select>
         </div>
       </div>

   </div>
   <button id="add-major" class="btn btn-secondary" type="button">Add Major</button>
   <!-- <a href="{{ url_for('schedule.schedule_output') }}" class="btn btn-lg button-send" role="button">Send</a> -->
   <div class="row">
     <div class="col-md-5 col-sm-5 col-xs-4"></div>
     <div class="col-md-2 col-sm-2 col-xs-4">
       <button class="btn btn-success button-send submit" role="button">Send</button>
     </div>
     <div class="col-md-5 col-sm-5 col-xs-4"></div>
   </div>

  </form>

{% endblock %}
